import React from 'react'
import { Button, Box, useColorMode, Text, useColorModeValue, LightMode, DarkMode, chakra, useStyleConfig, Input, InputGroup, Stack, InputLeftAddon, InputRightAddon, FormHelperText, FormControl, RadioGroup, Radio, Select, Switch, FormLabel, Flex } from '@chakra-ui/react'
import { FaUserAlt, FaLock, FaCheck } from 'react-icons/fa'

function App() {
  const { colorMode, toggleColorMode } = useColorMode()
  const bgColor = useColorModeValue('tomato', 'skyblue')
  // const Card = chakra("div", {
  //   baseStyle: {
  //     shadow: "lg",
  //     rounded: "lg",
  //     bg: "white",
  //   }
  // })
  // Card.defaultProps = {
  //   variant: 'primary'
  // }
  const LaGouButton = chakra('button', {
    baseStyle: {
      borderRadius: 'lg',
      px: '3',
      py: '1',
      fontSize: '12px',
      bgColor: 'blue.500',
      color: 'white'
    },
    sizes: {
      sm: {
        px: '3',
        py: '1',
        fontSize: '12px'
      },
      md: {
        px: '4',
        py: '2',
        fontSize: '14px'
      }
    },
    variants: {
      primary: {
        bgColor: 'blue.500',
        color: 'white'
      },
      danger: {
        bgColor: 'red.500',
        color: 'white'
      }
    },
    defaultProps: {
      size: 'sm',
      variant: 'primary'
    }
  })
  
  function Lgbtn (props) {
    const { size, variant, ...rest } = props
    const styles = useStyleConfig('LaGouButton', { size, variant })
    return <Box as="button" sx={styles} {...rest} />
  }
  return (
    <Box w="200px" h="100px" bgColor={bgColor}>
      <Text>当前颜色{colorMode}</Text>
      <Button onClick={toggleColorMode}>切换颜色</Button>
      <LightMode>
        <Button>浅色颜色</Button>
      </LightMode>
      <DarkMode>
        <Button>暗色颜色</Button>
      </DarkMode>
      <Box w="2xs" mt="20" h="10" boxShadow="lg" bgColor="cyan.500"></Box>
      <LaGouButton borderRadius="50%">a</LaGouButton>
      <Lgbtn variant='danger' size="md">b</Lgbtn>
      <Box w={["100px", "300px", "500px", "700px", "1000px"]} mt="20" h="10" bgColor="red.500"></Box>
      <form>
        <Stack spacing="0">
          <FormControl isDisabled isInvalid>
            <InputGroup>
              <InputLeftAddon children={<FaUserAlt />} />
              <Input placeholder="请输入用户名" />
            </InputGroup>
            <FormHelperText mt="0">用户名是必填项</FormHelperText>
          </FormControl>
          <InputGroup>
            <InputLeftAddon children={<FaLock />} />
            <Input placeholder="请输入用户名" />
            <InputRightAddon children={<FaCheck />} />
          </InputGroup>
          <RadioGroup defaultValue="0">
            <Radio value="0" mr="5">男</Radio>
            <Radio value="1">女</Radio>
          </RadioGroup>
          <Select placeholder="请选择">
            <option value="Java">Java</option>
            <option value="大前端">大前端</option>
            <option value="Java">Java</option>
          </Select>
          <Flex>
            <Switch id="deal" mt="2px" mr="3"/>
            <FormLabel htmlFor="deal">是否同意协议</FormLabel>
          </Flex>
          <Button colorScheme="teal" _hover={{bgColor: 'tomato'}} w="100%">注册</Button>
        </Stack>
      </form>
    </Box>
  );
}

export default App;
